import { LockOutlined, UserOutlined, MailTwoTone } from '@ant-design/icons';
import { Alert, message } from 'antd';
import React, { useState, useEffect } from 'react';
import ProForm, { ProFormCheckbox, ProFormText, ProFormCaptcha } from '@ant-design/pro-form';
import { useIntl, connect } from 'umi';
import styles from './index.less';
import logo from '@/assets/logo.png';
import request from '@/utils/request';
import apiPath from '@/utils/apiPath.js';

const Login = (props) => {
  const { userLogin = {}, submitting } = props;
  const { status } = userLogin;
  const [imgStyle, setImgStyle] = useState({});
  
  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values },
    });
  };

  const getVerifiCode = async (phone) => {
    try {
      await request(apiPath.GET_VERIFI_CODE, {
        method: 'POST',
        data: {
          phone: phone
        }
      });
      message.success(`手机号 ${phone} 验证码发送成功!`);
      return true;
    } catch (error) {
      message.error('发送失败');
      return false;
    }
  }

  useEffect(() => {
    setTimeout(() => {
      setImgStyle({
        transform: 'rotate(0deg)'
      });
    }, 100);
  }, []);

  return (
    <div className={styles.loginPage}>
      <div className={styles.formWrap}>
        <div className={styles.top}>
          <div className={styles.header}>
            <img alt="logo" className={styles.logo} src={logo} />
            <span className={styles.title}>MBA-ONLINE</span>
          </div>
          <div className={styles.desc}>
            go admin demo
          </div>
        </div>
        <div className={styles.main}>
          <ProForm
            submitter={{
              render: (_, dom) => dom.pop(),
              searchConfig: {
                submitText: '登录',
              },
              submitButtonProps: {
                loading: submitting,
                size: 'large',
                style: {
                  width: '100%',
                  backgroundColor: '#161848',
                  borderColor: '#161848'
                },
              },
            }}
            onFinish={(values) => {
              handleSubmit(values);
              return Promise.resolve();
            }}
          >
            <>
              <ProFormText
                name="phone"
                fieldProps={{
                  size: 'large',
                  prefix: <UserOutlined className={styles.prefixIcon} />,
                }}
                placeholder="手机号: "
                rules={[
                  {
                    required: true,
                    message: '请输入手机号',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: <LockOutlined className={styles.prefixIcon} />,
                }}
                placeholder="密码:"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ]}
              />
              <ProFormCaptcha
                name="verifi_code"
                phoneName="phone"
                fieldProps={{
                  size: 'large',
                  prefix: <MailTwoTone  className={styles.prefixIcon} />,
                }}
                captchaProps={{
                  size: 'large',
                }}
                placeholder="验证码:"
                rules={[
                  {
                    required: false,
                    message: '请输入验证码',
                  },
                ]}
                onGetCaptcha={(phone) => {
                  getVerifiCode(phone);
                }}
              />
            </>
            <div
              style={{
                marginBottom: 24,
              }}
            ></div>
            {
              (status === 'error' && !submitting) ? 
              <Alert
                style={{
                  marginBottom: 24,
                }}
                message="登录失败"
                type="error"
                showIcon
              /> : 
              <Alert
                style={{
                  marginBottom: 24,
                }}
                message="输入账号密码登录"
              />
            }
          </ProForm>
        </div>
      </div>
      <div className={styles.imgWrap}>
        <img className={styles.bgCircle2} style={imgStyle} src={require("../../../../assets/bgCircle2.png")} />
        <img className={styles.bgCircle3} style={imgStyle} src={require("../../../../assets/bgCircle3.png")} />
        <img className={styles.bgCircle4} style={imgStyle} src={require("../../../../assets/bgCircle4.png")} />
      </div>
    </div>
  );
};

export default connect(({ login, loading, user }) => ({
  userLogin: login,
  submitting: loading.effects['login/login']
}))(Login);
